<div class="relative px-6 pt-16">
    <div class="relative mx-auto max-w-7xl">
        <div class="text-center">
            <h2 class="text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl">Azimutt dialect converters</h2>
            <p class="mx-auto mt-3 max-w-2xl text-xl text-gray-500 sm:mt-4">Azimutt is freely providing you converters to transform several database schema dialects from one to another 🤘</p>
        </div>
        <div class="mt-8 flex justify-center">
            <p class="relative rounded-full bg-gray-50 px-4 py-1.5 text-sm leading-6 text-gray-600 ring-1 ring-inset ring-gray-900/5">
                <span class="hidden md:inline">Azimutt is a database exploration and documentation tool made for large databases.</span>
                <a href={Routes.website_path(@conn, :index)} class="font-semibold text-indigo-600"><span aria-hidden="true" class="absolute inset-0"></span> Try Azimutt now <span aria-hidden="true">→</span></a>
            </p>
        </div>
        <div class="mx-auto mt-12 grid max-w-lg gap-x-5 gap-y-10 md:max-w-none md:grid-cols-2 lg:grid-cols-3">
            <%= for converter <- Azimutt.converters() |> Enum.filter(fn c -> c.parse end) do %>
            <div class="flex flex-col overflow-hidden rounded-lg shadow-lg">
                <div class="flex-shrink-0">
                    <img class="h-48 w-full object-cover" src={Routes.static_path(@conn, "/images/converters/#{converter.id}.jpg")} alt={"#{converter.name} connector"}>
                </div>
                <div class="flex flex-1 flex-col justify-between bg-white p-6">
                    <div class="mt-2 block">
                        <p class="text-xl font-semibold text-gray-900"><%= converter.name %></p>
                        <p class="mt-3 text-base text-gray-500"><%= render "converters/_description-short.html", conn: @conn, converter: converter.id %></p>
                    </div>
                    <a href={Routes.website_path(@conn, :converter, converter.id)} class="block mt-3 text-slate-800 font-semibold text-sm hover:underline flex items-center">
                        Use <%= converter.name %> converter
                        <svg xmlns="http://www.w3.org/2000/svg" class="ml-2 h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3" />
                        </svg>
                    </a>
                </div>
            </div>
            <% end %>
        </div>
    </div>
</div>

<%= render "_footer.html", conn: @conn %>
